<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小说</title>
    <script th:src="@{/JS/jquery.js}"></script>
    <link rel="stylesheet" type="text/css" href="CSS/all.css" th:href="@{/CSS/all.css}"/>
    <script th:src="@{/JS/jquery.js}"></script>
    <style>
    header{
        font-size: 14px;
    }
    div.info>img{
        width: 100px;
        height: 120px;
        margin: 10px;
        padding: 5px;
        border: 1px solid #ccc;
    }
    div.info>div.bookinfo{
        float:right;
        width:calc(100% - 135px);
        line-height: 22px;
    }
    div.info>div.bookinfo>h2{
        margin: 10px 0px 5px 0px;
    }
    div.info>div.bookinfo>p{
        margin: 0px;
        color: #999;
        font-size: 14px;
        font-family: '黑体';
    }
    div.info>div.bookinfo>p>span{
        color: black;
    }
    div.buttons>a{
        display: inline-block;
        text-align: center;
        width: 49%;
        margin: 0px 0.5%;
        padding: 8px 0px;
        border-radius: 3px;
        color: white;
        background-color: #65bbec;
        border: none;
    }
    div.card>h3{
        padding: 8px;
        font-size: 15px;
        border-bottom: 1px solid #65bbec;
        background: #ECF0F0;
    }
    div.jianjie{
        color: #999;
    }
    div.zjlist>li{
        list-style: none;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }
    div.fenye{
        margin: 10px 0px;
        text-align: center;
        
    }
    div.fenye>button{
        width: 25%;
        margin: 0px 10px;
        padding: 8px;
        background: #cecece;
        border: none;
        border-radius: 4px;
        color: white;
        font-size: 14px;
        outline: none;
    }
    div.fenye>select{
        width: 35%;
        height: 35px;
        color: #999;
        font-size: 14px;
    }
    button.activebutton{
        background-color: #65bbec!important;
    }
    </style>
</head>
<body>
        <header>
            <div style="position: absolute;padding: 0 10px;height: 28px;margin: 0px 10px;line-height: 28px;font-size: 14px;background-color: #65bbec;border-radius: 3px;width: 30px;    top: calc((100% - 28px) / 2);">
                <a onclick="goback()" style="color: #fff;">返回</a>
            </div>
               <span th:text="${ChapterList['book'].name}"></span>
            <div style="    color: #fff;position: absolute;padding: 0 10px;width: 30px;height: 28px;margin: 0px 10px;line-height: 28px;text-align: center;border-radius: 3px;right: 0;top: 0;font-size: 14px;background-color: #65bbec;    top: calc((100% - 28px) / 2);">
                <a th:href="@{/Story/getAllCategoryStoryList(isLogin='')}" style="color: #fff;">首页</a>
            </div>

        </header>
        
        <main>
            <div class="info">
                <img th:src="@{${ChapterList['book'].imgUrl}}" alt="">
                <div class="bookinfo">
                    <h2 th:text="${ChapterList['book'].name}"></h2>
                    <p>作者：<span class="author" th:text="${ChapterList['book'].author}"></span></p>
                    <p>分类: <span class="fenlei" th:text="${ChapterList['category'].name}"></span> </p>
                    <p>状态: <span class="status" th:text="${ChapterList['book'].status}"></span></p>
                    <p>更新: <span class="updatetime"  th:text="${#dates.format(ChapterList['newChapter'].updateTime,'yyyy-MM-dd HH:mm:ss')}"></span></p>
                    <p>最新: <span class="zxzj" th:text="${ChapterList['newChapter'].title}"></span></p>
                </div>
            </div>
            <div class="buttons" >

                <a th:href="@{/Story/loadReadBook(chapterId=null,bookId=${ChapterList['book'].id})}">开始阅读</a><a th:data-value="${ChapterList['book'].id}" onclick="getsj(this)">加入书架</a>
            </div>
            <div class="content">
                    <div class="card">
                        <h3><span th:text="${ChapterList['book'].name}"></span>小说简介</h3>
                        <div class="jianjie" th:text="${ChapterList['book'].description}" style="padding: 0px 10px;line-height: 23px">

                        </div>
                    </div>
                    <div class="card">
                            <h3>[[${ChapterList['book'].name}]]小说最新章节 更新时间：[[${#dates.format(ChapterList['newChapter'].updateTime,'yyyy-MM-dd HH:mm:ss')}]]</h3>
                            <div class="newlist" th:each="chapter : ${ChapterList['newChapter']}">
                              <li style="list-style: none;padding: 10px;"> <a th:href="@{/Story/loadReadBook(chapterId=${chapter.id},bookId=${ChapterList['book'].id})}" th:text="${chapter.title}"></a> </li>
                            </div>
                        </div>
                        <div class="card">
                                <h3>正文</h3>
                            <div class="zjlist" th:each="chapter : ${ChapterList['objs']}">
                                <li> <a  th:href="@{/Story/loadReadBook(chapterId=${chapter.id},bookId=${ChapterList['book'].id})}" th:text="${chapter.title}"></a> </li>
                            </div>
                            <div class="fenye">
                                <button class="prev">上一页</button>
                                <select name="" id="xzxs" style="text-align: center">
                                    <option  th:value="${i}"  th:each="i:${#numbers.sequence(1,(ChapterList['total']==0?1:ChapterList['total']),1)}" th:text="${'第'+(i*20-19)+'-'+i*20+'章'}" ></option>
                                </select>
                                <button class="activebutton next" >下一页</button>
                            </div>
                        </div>

            </div>
        </main>
        <footer>
                本站所有小说为转载作品，所有章节均由网友上传，转载至本站只是为了宣传本书让更多读者欣赏。
        </footer>
</body>
<script th:inline="javascript">
    function goback(){
        history.back(-1);
    }
    var current = [[${ChapterList['currentPage']}]];
    var total = [[${ChapterList['total']}]];
    console.log(current)

    $('#xzxs').val(current);
    if(current==1) {
        $('div.fenye button').eq(0).removeClass('activebutton')

    }
        else{

        $('div.fenye button').eq(0).addClass('activebutton')

    }
    if(current==total){
        $('div.fenye button').eq(1).removeClass('activebutton')

    }
    else{
        $('div.fenye button').eq(1).addClass('activebutton')

    }
    console.log(total)
    function getsj(that){

        $.ajax({
            type:'POST',
            url:'/Store/addOrEdit',
            data:{
                bookId:that.dataset.value,
                userId:null,
                chapterId:null,
            },
            success:function(res){

                    alert(res.data);

            }
        })

    }
    var bookId = [[${ChapterList['book'].id}]];
    console.log(bookId);
    $('#xzxs').change(function(e){
        console.log(e.target.value);
        location.href='/Chapter/getChapterByBookId?bookId='+bookId+'&page='+e.target.value;
    })
   $('.prev').click(function(){
       if($('#xzxs').val()<=1)
           return;
       location.href='/Chapter/getChapterByBookId?bookId='+bookId+'&page='+($('#xzxs').val()-1);

    })
    $('.next').click(function(){
        if($('#xzxs').val()>=total)
            return;
        location.href='/Chapter/getChapterByBookId?bookId='+bookId+'&page='+($('#xzxs').val()*1+1);
    })
</script>
</html>
